<template>
  <div>
    <el-drawer :title="title" v-model="drawerVisible" :size="350" direction="rtl" :wrapperClosable="false"
      :modal="false" :before-close="handleClose">
      <div class="page_body">
        <el-tabs v-model="activeName">
          <el-tab-pane label="团队成员" name="info">
            <div class="info_box">
              <div class="drawer_title_box">
                <span class="drawer_title">团队成员({{ totalElements >= 100 ? '99+' : totalElements }})</span>
                <span class="title_more" @click="moreClick">查看更多<i class="el-icon-arrow-right"></i></span>
              </div>
              <div class="people_list">
                <div class="table_NameBox" v-for="(item, index) in peopleList" :key="index">
                  <!-- <img v-if="item.objectType == '3'" style="background: #3662EC;" src="@/assets/images/jues.png"
                    alt="" />
                  <img v-if="item.objectType == '2'" style="background: #FE4D4F;" src="@/assets/images/gwei.png"
                    alt="" />
                  <img v-if="item.objectType == '1'" style="background: #07b9b9;" src="@/assets/images/bumeng.png"
                    alt="" /> -->
                  <div v-if="item.objectType == '0'" class="avatar">
                    <div>{{ item.objectName.slice(0, 1) }}</div>
                  </div>
                  <div class="table_Name">
                    <p>{{ item.objectName }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="团队消息" name="message">
            <div class="people_list" v-if="messageList.length != 0">
              <div class="message_box" v-for="(item, index) in messageList" :key="index">
                <div class="message_content">
                  <div class="icon_box">
                    <i class="el-icon-bell"></i>
                  </div>
                  <div class="content">{{ item.content }}</div>
                </div>
                <div class="message_time">{{ item.createTime }}</div>
              </div>
            </div>
            <div v-else>
              <el-empty description="暂无数据"></el-empty>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { apiTeamMemberQuery, apiTeamGetTeamMessage } from "@/api/teamKnowdge/teamDocApi"
const router = useRouter()
const drawerVisible = ref(false)
const title = ref('')
const activeName = ref('info')
const teamInfo = ref({
  id: '',
  headNodeId: '',
})
const totalElements = ref(0)
const peopleList = ref([])
const messageList = ref([])


const handleOpen = (row) => {
  teamInfo.value = row
  title.value = row.teamName
  drawerVisible.value = true
  getPeopleList()
  getMessageList()
}
const getPeopleList = async () => {
  const res = await apiTeamMemberQuery({ teamId: teamInfo.value.id, page: 0, size: 9999 })
  if (res.code == 200) {
    totalElements.value = res.data.total
    peopleList.value = res.data.rows
  }
}
const getMessageList = async () => {
  const res = await apiTeamGetTeamMessage({
    teamId: teamInfo.value.id,
  })
  if (res.code == 200) {
    messageList.value = res.data
  }
}
const handleClose = (done) => {
  done()
}
const moreClick = () => {
  router.push(`/newUi/teamKnowdge/teamUser?headNodeId=${teamInfo.value.headNodeId}&teamId=${teamInfo.value.id}`)
}
defineExpose({
  handleOpen
})

</script>
<style scoped lang='scss'>
.page_body {
  padding: 0 12px 12px;
}

:deep(.el-drawer__header) {
  margin-bottom: 12px;
}

.drawer_title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;

  .drawer_title {
    font-weight: bold;
  }

  .title_more {
    color: #999;
    cursor: pointer;

    &:hover {
      color: #6698ff;
    }
  }
}

.people_list {
  height: calc(100vh - 180px);
  overflow-y: auto;
}

.table_NameBox {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  .avatar {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-right: 4px;

    div {
      margin-top: 2px;
      margin-left: 1px;
      // transform: scale(0.9, 0.9);
    }
  }

  img {
    padding: 2px;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    border-radius: 15px;
  }

  .table_Name {
    margin-left: 5px;
    font-size: 14px;

    p {
      margin: 0;
    }

    span {
      color: #999;
    }

    .table_Name_span {
      color: black;
    }

    .table_Name_syz {
      border: 1px solid #83acff;
      padding: 4px 5px;
      border-radius: 5px;
      margin-left: 5px;
      color: #83acff;
    }
  }
}

.message_box {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 8px;

  .message_content {
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;

    .icon_box {
      width: 24px;
      height: 24px;
      background-color: #6698ff;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 24px;
    }

    .content {
      width: 270px;
      margin-left: 8px;
    }
  }

  .message_time {
    color: #999;
    font-size: 12px;
  }
}
</style>